<template>
	<view class="wrap">
		<view class="item">
			<view class="title">毛泽东思想</view>
			<view class="u-flex">
				<u-circle-progress class="u-flex-1" active-color="#2979ff" :percent="100">
					<view class="u-progress-content">
						<view class="u-progress-dot"></view>
						<text class='u-progress-info'>100%</text>
					</view>
				</u-circle-progress>
				<view class="info">
					<view>开始时间：</view>
					<view>2021-02-05</view>
					<view>结束时间：</view>
					<view>2021-06-05</view>
				</view>
			</view>
			<view class="operBtn">
				<u-button type="primary" size="mini">继续学习</u-button>
				<u-button type="success" size="mini">自测一下</u-button>
			</view>
		</view>
		<view class="item">
			<view class="title">邓小平理论</view>
			<view class="u-flex">
				<u-circle-progress class="u-flex-1" active-color="#2979ff" :percent="80">
					<view class="u-progress-content">
						<view class="u-progress-dot"></view>
						<text class='u-progress-info'>80%</text>
					</view>
				</u-circle-progress>
				<view class="info">
					<view>开始时间：</view>
					<view>2021-02-05</view>
					<view>结束时间：</view>
					<view>2021-06-05</view>
				</view>
			</view>
			<view class="operBtn">
				<u-button type="primary" size="mini">继续学习</u-button>
				<u-button type="success" size="mini">自测一下</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
page{
	background: #f8f8f8;
}
.wrap{
	padding:20rpx;
	height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
	background-color: rgb(240, 242, 244);
	.item{
		border-radius: 0.3em;
		background: #fff;
		padding:20rpx;
		box-shadow: 0 0 5px rgba(0,0,0,0.2);
	}
	.title{
		font-weight:600;
		margin-bottom: 20rpx;
		color:#666;
	}
	.info{
		font-size:24rpx;
	}
	.operBtn{
		margin-top:20rpx;
		text-align: right;
		button{
			margin-left:20rpx;
		}
	}
}
</style>
